Nesta sessão, você terá acesso à visão geral da interação do usuário pelas telas do Match Game, bem como o protótipo interativo das telas com as funcionalidades que fazem parte do sistema (wireframes).
A interface deve atender à todos os critérios dos requisitos funcionais e não funcionais. Além disso, a interface do sistema busca entregar uma navegação intuitiva, simples e acessível em todos os tipos de dispositivos.
O diagrama apresentado na figura abaixo mostra o fluxo de interação do usuário pelas telas do Match Game. Cada uma das telas deste fluxo é detalhada na seção de Wireframes que se segue.
Diagrama de Fluxo
Levando em consideração o fluxo do usuário, e os requisitos funcionais e não funcionais do sistema, apresentaremos a seguir todas as telas que irão compor o Match Game. Os wireframes do sistema, apresentados nas seções abaixo, foram desenvolvidos utilizando a metodologia de mobile first.
A tela "Homepage" mostrará o jogo, bem como as principais informações que o usuário precisa ter acesso. Como por exemplo links rápidos para realizar cadastro, realizar login, acessar o perfil, acessar página "For You" e acessar "Favoritos".
Wireframe - Homepage
A tela "Cadastro" deverá permitir que um novo usuário se cadastre ao sistema, através do preenchimento dos seguintes campos: Nome, E-mail, Data de Nascimento e Senha.
Wireframe - Cadastro
A tela "Login" deverá permitir que usuários já cadastrados ao sistema realizem o login e possam ter acesso ao jogo, bem como outras informações pessoais de seu perfil. O usuário deverá conseguir realizar o login através do preenchimento dos seguintes campos: E-mail e Senha.
Wireframe - Login
A tela "Esqueci Minha Senha" deverá permitir que usuários que já cadastrados ao sistema, mas que não estejam conseguindo realizar o login por não lembrar da senha cadastrada, possam gerar uma nova senha ao seu perfil. Para isso, faz-se necessário que o usuário já cadastrado preencha o campo de e-mail (Figura 1), após isso, ele deverá receber um código por e-mail que deverá ser disponibilizado ao sistema (Figura 2). Uma vez que o código é verificado, o usuário poderá cadastrar uma nova senha ao seu perfil (Figura 3).
Wireframe - Esqueci Minha Senha - Figura 1
Wireframe - Esqueci Minha Senha - Figura 2
Wireframe - Esqueci Minha Senha - Figura 3
A tela "For You" disponibilizará para o usuário logado no sistema todos os jogos que foram recomendados para ele.
Wireframe - For You
A tela "Minhas Recomendações" disponibilizará para o usuário logado no sistema todos os jogos que foram recomendados por ele, para amigos.
Wireframe - Minhas Recomendações
A tela "Favoritos" disponibilizará para o usuário logado no sistema todos os jogos que foram favoritados por ele.
Wireframe - Favoritos
A tela "Meu Perfil" disponibilizará para o usuário logado no sistema todas as informações referente ao seu cadastro no sistema, como por exemplo: foto de perfil, nome, e-mail cadastrado, e data de nascimento. Além disso, também deverá disponibilizar acesso rápido ao usuário para realizar a alteração da senha de perfil e acessar a área de "Minhas Recomendações".
Wireframe - Meu Perfil
Para que você tenha acesso ao Protótipo Interativo dos Wireframes, clique aqui